<p>
  layouts works!
</p>

<h4>row</h4>
<div layout="row">
  <div flex>child</div>
  <div flex>child</div>
  <div flex>child</div>
</div>

<h4>column</h4>
<div layout="column">
  <div flex>child</div>
  <div flex>child</div>
  <div flex>child</div>
</div>

<h4>Layout margin</h4>
<div layout="row" layout-margin>
  <div flex>child</div>
  <div flex>child</div>
  <div flex>child</div>
</div>

<h4>Layout padding</h4>
<div layout="row" layout-padding>
  <div flex>child</div>
  <div flex>child</div>
  <div flex>child</div>
</div>

<h4>Responsive widths</h4>
<div layout="row" layout-padding>
  <div flex="40">child</div>
  <div flex>child</div>
  <div flex="30">child</div>
</div>

<h4>Responsive widths (will change as you resize browser)</h4>
<div layout="row" layout-padding>
  <div flex-gt-xs="40" flex-md="50">child</div>
  <div flex>child</div>
  <div flex-gt-xs="30" flex-md="20" flex-lg="10">child</div>
</div>

<h4>Typical responsive layout (just collapse on xs which is mobile)</h4>
<div layout-gt-xs="row">
  <div flex-gt-xs="60">child</div>
  <div flex-gt-xs="40">child</div>
</div>
